<template>
  <el-upload class="upload-demo"
             drag
             :action="actionUrl"
             :file-list="fileList"
             :limit="limit"
             :on-exceed="uploadExceed"
             :before-upload="beforeUpload"
             :on-success="uploadSuccess"
             :data="uploadParams">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">
      (1)、上传单文件小于100M。
      <br>(2)、最多支持10个文件上传。
      <br>(3)、请勿上传已加密或只读文件，否则系统因无法转换而报错。
      <br>(4)、支持格式：jpg、png、xls、xlsx、ppt、pptx、doc、docx、mp4、mp3。
    </div>
  </el-upload>
</template>

<script>
import {getSignature} from "@/api/system/oss";

export default {
  name: 'upload',
  data() {
    return {
      actionUrl: '',
      limit: 10,
      path: '',
      uploadParams: {
        'name': '',
        'key': '',
        'policy': '',
        'signature': '',
        'OSSAccessKeyId': ''
      },
      allowedSuffixes: ['jpg', 'png', 'xls', 'xlsx', 'ppt', 'pptx', 'doc', 'docx', 'mp4', 'mp3'],
      fileList: [],
      form: {}
    }
  },
  mounted() {
    this.getUploadParams()
  },
  methods: {
    getUploadParams() {
      let that = this;
      getSignature().then(res => {
        that.actionUrl = res.data.host
        that.path = res.data.path
        that.uploadParams.policy = res.data.policy;
        that.uploadParams.signature = res.data.signature;
        that.uploadParams.OSSAccessKeyId = res.data.accessKey;
      })
    },
    beforeUpload(file) {
      let data = this.beforeVideoUpload(file, this.path);
      if (!data.status) {
        return false;
      }
      let localFileSrc = null;
      if (window.createObjectURL !== undefined) {
        localFileSrc = window.createObjectURL(file);
      } else if (window.URL !== undefined) {
        localFileSrc = window.URL.createObjectURL(file);
      } else if (window.webkitURL !== undefined) {
        localFileSrc = window.webkitURL.createObjectURL(file);
      }
      // 使用原生JavaScript创建video元素，避免使用jQuery
      let video = document.createElement('video');
      video.controls = true;
      video.src = localFileSrc;
      this.uploadParams.key = data.uploadKey;
      this.uploadParams.name = data.uploadName;
    },
    beforeVideoUpload(file, path) {
      let data = {
        status: false,
        fileType: undefined,
        uploadKey: undefined,
        uploadName: undefined
      }
      const fileName = file.name
      let suffix = fileName.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
      data.fileType = suffix;

      if (!this.allowedSuffixes.includes(suffix)) {
        this.$message.error("文件类型错误");
        data.status = false; // 失败则返回true
        return data;
      }

      if (file.size > 5 * 1024 * 1024 * 1024) { // 5GB
        this.$message.error("文件不能超过5GB");
        data.status = false; // 失败则返回true
        return data;
      }

      if (file.name.length > 150) {
        this.$message.error("文件名过长");
        data.status = false; // 失败则返回true
        return data;
      }

      data.uploadKey = `${path}${fileName}`;
      data.uploadName = `${fileName}`;
      data.status = true; // 成功则返回true
      return data;
    },
    uploadExceed() {
      this.$message.error(`可上传最大文件个数：${this.limit}`)
    },
    uploadSuccess(response, file, fileList) {
      this.form.title = file.name.substring(0, file.name.lastIndexOf('.'));
      this.fileList = [];
      this.fileList.push(file);
      console.log("fileList", this.fileList)
    }
  }
}
</script>
